<template>
  <service-list ref="user" :trigger="'hover'" placement="right" @callBack="userCallBack" @fact-entity="entityCallBack">
    <div slot="reference" class="container-content" :style="userShow === true?customStyle:''" @mouseenter="openUser" @mouseleave="closeUser">
      <div class="container-li-body">
        <div class="container-li-top" :style="userShow === true?customStyle:''">
          <span>{{ item.title }}</span>
          <span class="right-content"><i class="el-icon-arrow-right" /></span>
        </div>
        <div class="container-li-bottom">
          <special-item :key="item.id+'-parent'" :pid="item.id" @fact-fl="flCallBack" />
        </div>
      </div>
    </div>
  </service-list>
</template>
<script>
import SpecialItem from './SpecialItem';
import ServiceList from './ServiceList';
export default {
  name: 'ServiceItem',
  components: { SpecialItem, ServiceList },
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      userShow: false,
      customStyle: {}
    };
  },
  computed: {
    themes() {
      return this.$store.getters.theme;
    }
  },
  watch: {
    themes: {
      handler(newData, oldData) {
        this.customStyle.color = newData.changeFontColor;
        this.customStyle.background = newData.changeBackGroundColor;
        this.customStyle = Object.assign({}, this.customStyle);
      },
      immediate: true, // 父组件第一次传值时，执行handler，false则第一次不执行
      deep: false // formType为对象时，设置为true，此属性监听对象发生变化
    }
  },
  methods: {
    openUser() {
      this.userShow = true;
      this.$refs.user.triggerOnClick(this.item);
    },
    entityCallBack(data) {
      this.$emit('fact-entity', data);
    },
    flCallBack(data) {
      // this.$emit('fact-entity', data)
    },
    closeUser() {
      this.userShow = false;
      this.$refs.user.triggerOnClick();
    },
    userCallBack(data) {
      this.userShow = data;
    }
  }
};
</script>

<style scoped>
.container-content{
  width: 100%;
  height: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}
.container-li-top{
  height: 44px;
  line-height: 44px;
  font-size: 0.9rem;
}
.container-li-bottom{
  height: 22px;
  line-height: 22px;
  font-size: 0.8rem;
  color: #a1a4bb;
}
.container-li-body {
  width: 100%;
  height: 100%;
}
.container-li-body {
  border-bottom: 1px solid #eeeeee;
}
.right-content {
  float: right;
  font-size: 0.8rem;
  cursor: pointer;
  margin-right: 15px;
}
.right-content:hover{
  font-weight: bolder;
}
</style>
